<template>
  <view class="goods-list">
    <view class="goods-item" v-for="(item, index) in goodsList.data" :key="index" @tap="goToDetail(item)">
      <image :src="item.logo" mode="widthFix"></image>
      <view class="info">
        <text class="title">{{ item.name }}</text>
        <text class="desc">{{ item.desc }}</text>
        <view class="price-row">
          <text class="price">¥{{ item.price }}</text>
          <text class="sold">已售{{ item.sold }}件</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {usePageData} from "../../../common/usePageData";
import {ref} from "vue";

const searchObject=ref( {});
const  {pageData:goodsList} =usePageData("product_list",searchObject)


const goToDetail = (item) => {
  //emit('goToDetail', item)
}
</script>

<style scoped>
.goods-list {
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.goods-list .goods-item {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.goods-list .info {
  padding: 20rpx 0;
}

.goods-list .title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.goods-list .desc {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #e1251b;
  font-size: 32rpx;
  font-weight: bold;
}

.sold {
  color: #999;
  font-size: 24rpx;
}

/* 添加图片加载失败的默认样式 */
.image-placeholder {
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 24rpx;
}
</style>
